import React from 'react'
import { connect } from 'dva'
import PropTypes from 'prop-types'
import { Button, Row, Col, Layout, Spin, Icon, Input, Form } from 'antd'
// import  createClass  from 'create-react-class'
import style from '../Login.less'
import { numvail } from '../../../utils/Validator.js'
import { password, passwordVale } from '../../../utils/util.js'
import { Link } from 'dva/router'

const FormItem = Form.Item
// const { RangePicker } = DatePicker;

class RegistFirst extends React.Component {
  // const Regist = createClass
  // createClass function Regist(){
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      list: [],
      confirmDirty: false,
      code: '发送验证码',
      timer: 60
    }
  }
  // static contextTypes = {
  // 	router: PropTypes.object
  // }
  componentWillMount() {
    // this.fetch(1);
    // console.log(this)
    // console.log(_current)
    clearInterval(this.timeoutId)
  }
  componentWillUnmount() {
    // this.reqwest_server.abort();
    clearInterval(this.timeoutId)
  }
  checkPassword(rule, value, callback) {
    const { form } = this.props.ispatch
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入密码需要一致')
    } else {
      callback()
    }
  }
  checkConfirm(rule, value, callback, _this) {
    const { form } = _this.props.ispatch
    if (value && this.state.confirmDirty) {
      form.validateFields(['password2'], { force: true })
    }
    callback()
  }
  handleConfirmBlur(e) {
    const value = e.target.value
    this.setState({ confirmDirty: this.state.confirmDirty || !!value })
  }
  handleCode() {
    let _this = this
    let _timer = this.state.timer
    const { form, dispatch } = this.props.ispatch

    if (
      this.state.code == '发送验证码' &&
      form.getFieldValue('mobile').length == 11
    ) {
      if (_timer == 60) {
        // _this.codeServer()
        dispatch({
          type: 'regist/code',
          payload: { mobile: form.getFieldValue('mobile') }
        })
        _this.setState({ code: '60秒后重发' })
        form.setFieldsValue({ code: '' })
      }
      this.timeoutId = setInterval(() => {
        _timer--
        // _this.setState({timer:_timer});
        if (_this.state.timer > 0) {
          _this.setState({ code: _timer + '秒后重发', timer: _timer })
          console.log(1)
        } else if (_this.state.timer <= 0) {
          _this.setState({ code: '发送验证码', timer: 60 })
          clearInterval(_this.timeoutId)
        }
      }, 1000)
    } else {
      form.setFields({
        mobile: {
          errors: [new Error('请输入手机号')]
        }
      })
    }
  }
  render() {
    const { decorator } = this.props
    const { code } = this.state
    let _this = this
    return (
      <Row className={`${style.item}`}>
        <FormItem>
          {decorator('mobile', {
            rules: [
              {
                required: true,
                message: '请输入手机',
                validator: (rule, value, callback) => {
                  numvail(rule, value, callback)
                }
              }
            ]
          })(<Input placeholder="手机" />)}
        </FormItem>
        <FormItem className={`${style.code}`}>
          {decorator('code', {
            rules: [{ required: true, message: '请输入验证码' }]
          })(
            <Input
              placeholder="验证码"
              addonAfter={
                <span onClick={this.handleCode.bind(this)}>{code}</span>
              }
            />
          )}
        </FormItem>
        <FormItem>
          {decorator('password', {
            rules: [
              {
                required: true,
                validator: (rule, value, callback) => {
                  _this.checkConfirm(rule, value, callback, _this)
                }
              }
            ]
          })(<Input type="password" placeholder="密码" />)}
        </FormItem>
        <FormItem>
          {decorator('password2', {
            rules: [
              {
                required: true,
                validator: (rule, value, callback) => {
                  _this.checkPassword(rule, value, callback, _this)
                }
              }
            ]
          })(
            <Input
              onBlur={this.handleConfirmBlur.bind(this)}
              type="password"
              placeholder="确认密码"
            />
          )}
        </FormItem>
        <FormItem>
          <Button htmlType="submit" size="large" type="primary">
            下一步
          </Button>
        </FormItem>
      </Row>
    )
  }
}

export default connect(({ regist }) => ({ regist }))(RegistFirst)
